/*
 * Copyright 2020 The Kubernetes Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@use 'sass:math';
@import 'mixins';

@import '../Sidecar/mixins';
@import '../../Themes/mixins';

@import 'BlockBorder';

.repl-input,
.repl-input-sourceref,
.repl-output {
  padding-right: $input-padding-right;
  padding-right: var(--input-padding-right);
}

/** Placeholder text styling */
@include Input {
  &::placeholder {
    opacity: 0.3;
    font-size: calc($terminal-font-size * 12 / 14);
    color: var(--color-text-02);
  }
}

/** We are using <li> for the blocks, but don't want any standard browser styling */
@include Block {
  list-style: none;
}

@include FinishedBlockWithNoOutput {
  display: none;
}

@mixin NoInputColorBlocking {
  border: none;
  background-color: transparent;
}
@include InputWrapperForEmptyBlock {
  @include NoInputColorBlocking;
}

@include SepiaBlockTarget {
  @include SepiaColors;
}

@include Block {
  @include InputWrapper {
    font-size: calc($terminal-font-size * 12 / 14);
  }
}

@include Block {
  @include InputWrapper {
    border: $input-border;
    border-radius: 1px / 2px;
    &[data-is-reedit] {
      border-color: $input-border-editing;
    }
  }
  @include Input {
    white-space: pre-wrap;
  }
}
@include Block {
  @include InputWrapper {
    background-color: $input-bg;

    &.kui--inverted-color-context {
      background-color: $input-bg-inverted;
    }
  }
}

/** Coloring the context border by status of the block */
@include Scrollback {
  .repl-input:hover,
  .repl-output:hover {
    @include show-block-action-buttons;
  }

  @include Block {
    --input-padding-left: #{$input-padding-left};
    --input-padding-right: #{$input-padding-right};

    position: relative;

    &:hover .repl-output .repl-context:after {
      border-color: var(--color-base03);
    }
  }

  @include Block {
    @include Context {
      padding: $inset 0;
      align-items: flex-start;
    }

    @include ContextInner {
      display: flex;
      align-items: center;
      font-size: $terminal-font-size;
    }
  }

  /** focus */
  li.repl-block:focus {
    outline: none;
  }
  li:focus.repl-block,
  li:hover.repl-block[data-is-focused],
  .repl-block[data-is-focused] {
    .repl-input .repl-context {
      opacity: 1;
    }
  }
  li:not(:focus) {
    &.repl-block {
      .repl-context:hover,
      .repl-input-element:hover {
        cursor: pointer;
      }
    }
  }

  @include Block {
    display: flex;
    flex-direction: column;
    padding: 0.5em 0;

    @include OutputOnly {
      @include HideContext;
    }

    @include NotOutputOnly {
      @include BlockOutput {
        margin-top: 0.25rem;
      }
    }

    /* special positioning for Actions inside of output-only versus input blocks */
    @include BlockOutput {
      @include BlockActions {
        top: -0.25em;
        bottom: calc(100% - 1.5em);
      }
    }
    @include BlockActions {
      display: flex;
      opacity: 0;
      border-radius: 1px;
      background-color: var(--color-base03);

      transition-property: opacity;
      transition-delay: $action-hover-delay;
      transition-duration: 140ms;

      position: absolute;
      top: 0; /* this with bottom:0 gives 1) vertical center; 2) occluding of repl-input-element content */
      bottom: 0;
      right: 0;
    }

    @include BlockAction {
      align-items: center;
      justify-content: center;
      display: flex;
      padding: $action-padding;
      width: $action-width;
      color: var(--color-text-01);

      /* This is a bit of a hack for TwoFaceIcon, to work around the Checkmark being narrower than other icons in Carbon */
      svg {
        fill: currentColor;
        min-width: 1em;
      }

      .green-text {
        color: var(--color-ok);
      }
      .red-text {
        color: var(--color-error);
      }
      .yellow-text {
        color: var(--color-warning);
      }
    }

    .kui-block-actions-others:not(:empty) {
      display: flex;
      border-right: 1px solid var(--color-table-border1);
    }

    @include BlockAction {
      &:hover {
        cursor: pointer;
        background-color: var(--color-base02);
      }
    }

    .repl-input,
    .repl-input-sourceref,
    .repl-output {
      padding-left: $input-padding-left;
      padding-left: var(--input-padding-left);
    }
    .repl-input .kui--toolbar-button-with-icon {
      /* have buttons fit inside the input region */
      height: 1.125em;
    }
    @include Context {
      color: var(--color-text-02);
      display: flex;
      justify-content: flex-end;
      text-align: end;
      position: relative;
      opacity: 0.75;

      /** For In[N], i.e. Notebook style, we want to reserve a fixed amount of space, so that everything lines up */
      &:not([data-custom-prompt]) {
        min-width: $repl-context-min-width;
        margin-right: $repl-context-margin-right;
      }

      /** E.g. Output with custom prompt */
      &:not(:empty) {
        margin-right: $repl-context-margin-right;
      }

      .kui--block-action {
        /* This is e.g. the Edit icon that is displayed while editing a command line */
        padding: 0;
        color: var(--color-base0C);
      }
    }

    .repl-input .repl-context:before {
      left: -1em !important;
    }

    & {
      @include InputWrapper {
        align-items: stretch;
        padding-left: $inset;
        position: relative; /* for repl-block-actions' position: absolute */
        .repl-input-element,
        .kui--repl-input-element-nbsp {
          padding: $inset 0;
          padding-right: $inset; /* to pad against timestamp and action buttons */
        }
      }
    }

    &[data-is-output-only] {
      /* repl right-hand decorations */
      .repl-output .repl-prompt-right-elements {
        position: absolute;
        right: 0.25em;
        top: -0.25em;
      }
    }

    .kui--repl-result-else {
      font-size: 0.75em;
      font-family: var(--font-sans-serif);
      &,
      a {
        color: var(--color-text-02);
      }
      a {
        font-weight: bold;
      }
    }
  }
}

@include SideBySide {
  @include HideIn;
}
@include WidthConstrained {
  @include HideIn;
}

body[kui-theme-style] .kui--repl-block-right-element {
  color: var(--color-text-02);
  font-size: $right-element-font-size;
}

@mixin timestamp-like {
  margin: math.div($inset, $right-element-font-size-factor);
  display: flex;
  align-items: center;
  transition-delay: $action-hover-delay;
}

/* timestamp */
.repl-block {
  @include BlockTimestamp {
    @include timestamp-like();
  }
  .kui--repl-block-re-editing {
    @include timestamp-like();
  }
}
@include InputWrapper {
  &:hover {
    @include BlockTimestamp {
      @include DisappearOnHover;
    }
  }
}

@include StreamingOutput {
  pre {
    margin: 0;
    white-space: pre-wrap;
  }
}

@include BlockInputWithActiveISearch {
  align-items: center;
  @include InputWrapper {
    width: 0;
    opacity: 0;
  }
}
